:root { 
    --bg-default:   #141617;
    --hg-default:   #ffffff;
    --bg-primary:   #242729;
    --hg-primary:   #ffffff;
    --tx-primary:   #c3c3c3;
    --bg-secondary: #3b4045;
    --hg-secondary: #ffffff;
    --tx-secondary: #c3c3c3;
    --bg-info:      #515961;
    --hg-info:      #ffffff;
    --tx-info:      #c3c3c3;
    --bg-success:   #38ca56;
    --hg-success:   #000000;
    --tx-success:   #2d2d2d;
    --bg-alert:     #d2e600;
    --hg-alert:     #000000;
    --tx-alert:     #2d2d2d;
    --bg-warning:   #e48700;
    --hg-warning:   #000000;
    --tx-warning:   #2d2d2d;
    --bg-error:     #c70000;
    --hg-error:     #ffffff;
    --tx-error:     #2d2d2d;
    --bs-color:     #cacaca;
    --text-color: Azure;  
    --back-color: #3a4149;
}
@media (prefers-color-scheme: dark) {
    :root { 
        --text-color: Azure;  
        --back-color: #3a4149;
        --bs-color:   #cacaca;
    }
}

@media (prefers-color-scheme:light) {
    :root { 
        --text-color: #3a4149;  
        --back-color: Azure;
        --bs-color:     #cacaca;
    }
}
@media (prefers-color-scheme: no-preference)
    or (prefers-ui-theme: no-preference) 
    or (prefers-interface-colors: no-preference)
    or (prefers-interface-theme: no-preference)
    or (prefers-interface-colors: no-preference)  {
    :root { 
        --text-color: DarkBlue;  
        --back-color: Azure;
        --bs-color:     #cacaca;
    }
}
body, body *:not(.modal) {
    color: var(--text-color) !important;
    background-color: var(--back-color) !important;
    background: var(--back-color) !important;
    box-shadow: var(--bs-color) !important;
}